<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>景点讲解</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="max-w-md mx-auto bg-white min-h-screen">
        <!-- 顶部图片 -->
        <div class="relative h-64">
            <img src="https://source.unsplash.com/800x600/?palace" alt="太和殿" class="w-full h-full object-cover">
            <div class="absolute top-0 left-0 right-0 p-4 flex items-center">
                <button onclick="history.back()" class="text-white">
                    <i class="fas fa-arrow-left text-2xl"></i>
                </button>
            </div>
        </div>

        <!-- 音频控制器 -->
        <div class="bg-white p-4 shadow-lg relative -mt-6 mx-4 rounded-lg">
            <h2 class="text-xl font-bold mb-2">太和殿</h2>
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <button class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center">
                        <i class="fas fa-play text-white"></i>
                    </button>
                    <div class="ml-4">
                        <p class="text-gray-500">01:30 / 05:00</p>
                    </div>
                </div>
                <button class="text-blue-500">
                    <i class="fas fa-list"></i>
                </button>
            </div>
            <div class="mt-4 bg-gray-200 rounded-full h-1">
                <div class="bg-blue-500 h-1 rounded-full" style="width: 30%"></div>
            </div>
        </div>

        <!-- 文字讲解 -->
        <div class="p-4 mt-4">
            <div class="space-y-4">
                <p class="text-gray-700 leading-relaxed">
                    太和殿，俗称金銮殿，是紫禁城内的主要建筑，建于明永乐十八年（1420年），是明清两代皇帝登基、大婚、举行朝会等大典的地方。
                </p>
                <p class="text-gray-700 leading-relaxed">
                    太和殿面阔11间，进深5间，建筑面积2377平方米，檐高35.05米，重檐庑殿顶，黄琉璃瓦覆顶，是紫禁城中最大的木结构建筑。
                </p>
            </div>
        </div>

        <!-- 图片展示 -->
        <div class="p-4">
            <h3 class="font-bold mb-4">相关图片</h3>
            <div class="grid grid-cols-2 gap-4">
                <img src="https://source.unsplash.com/400x300/?palace-interior" alt="内部图片" class="rounded-lg">
                <img src="https://source.unsplash.com/400x300/?throne" alt="龙椅图片" class="rounded-lg">
            </div>
        </div>

        <!-- 底部导航 -->
        <div class="fixed bottom-0 left-0 right-0 bg-white border-t p-4">
            <div class="flex justify-between">
                <button class="flex-1 text-center">
                    <i class="fas fa-step-backward text-blue-500"></i>
                    <p class="text-xs mt-1">上一个</p>
                </button>
                <button class="flex-1 text-center">
                    <i class="fas fa-map-marked-alt text-blue-500"></i>
                    <p class="text-xs mt-1">导览地图</p>
                </button>
                <button class="flex-1 text-center">
                    <i class="fas fa-step-forward text-blue-500"></i>
                    <p class="text-xs mt-1">下一个</p>
                </button>
            </div>
        </div>
    </div>
</body>
</html>